<template>
  <div>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="评分标准" name="1">
        <!-- <div v-for="(item, index) in standard" :key="index">
          <p>{{ item }}</p>
        </div> -->
        <div>{{ this.standard }}</div>
      </van-collapse-item>
      <div v-if="authority == '1'">
      <van-cell title="随机抽取答辩学生" icon="smile-o" @click="warning()" />
      <van-cell title="结束当前答辩学生评价" icon="certificate" @click="endWarning()" />
      <!-- <van-cell title="结束本次答辩！" icon="sign" @click="over()" /> -->
      <van-cell title="导出答辩总成绩！" icon="sign" @click="outputAll()" />
      <van-cell title="导出答辩详细成绩！" icon="sign" @click="outputdetail()" />
    </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="chname"
          name="答辩人"
          label="当前答辩人"
          placeholder="当前无人答辩"
          readonly
        />
        <div v-for="(item, index) in labels" :key="index">
          <van-field
            v-model="Scoring[index]"
            :label="labels[index]"
            :name="labels[index]"
            :placeholder="max + standardScoring[index]"
            label-width="10em"
            required
            @keydown.enter.prevent="focusNextInput(index)"
            :rules="[
              { required: true, message: '请输入分数' },
              {
                validator: (value) => {
                  if (value > standardScoring[index] || value<0 ) {
                    return false;
                  } else {
                    return true;
                  }
                },
                message: '输入数据有误',
              },
            ]"
          />
        </div>
        <van-field
          v-model="memo"
          name="备注"
          label="备注"
          placeholder="请输入备注"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit"
            >提交</van-button>
        </div>
      </van-form>
      <van-button round block type="danger" @click="over()" style="width: 96%;margin: 0 auto; margin-bottom: 50px;" v-if="authority == '1'">结束本次答辩！</van-button>
    </van-collapse>
  </div>
</template>

<script>
import axios from "axios";
// import Scoring from "../Scoring.vue";
import { mapMutations } from "vuex";
// import { readonly } from 'vue';

export default {
  name: "MainPage",
  data() {
    return {
      authority:localStorage.getItem("authority"),
      dbr: "",
      chname: "无人答辩！",
      pfbzs: 4,
      max: "0-",
      activeNames: ["1"],
      standardScoring: [],
      standard: "",
      // labels: ["选题难度", "代码质量", "功能实现", "答辩表现"],
      labels: [],
      Scoring: [0, 0, 0, 0, 0],
      memo: "",
      zf: 0,
    };
  },
  mounted() {
    console.log(this.authority);
    // if (window.innerWidth > 768) {
    //   this.$router.push("/PCIndex");
    // }
    axios.post("/scores/talking?classId=" + this.$route.params.id).then((response) => {
      this.chname = response.data.data.chname;
      this.dbr = response.data.data.dbr;
      console.log(666);
      this.SavedbrId(this.dbr);
      console.log(this.$store.state.dbrId);
    });
    axios.post("/scores/pfbzmsg?classId=" + this.$route.params.id)
      .then((response) => {
        // console.log(response.data);
        // console.log(response.data.data);
        this.standard = response.data.data[0].pfbzmsg;
        this.pfbzs = response.data.data[0].pfbzs;
        this.labels = [
          response.data.data[0].pfbz1,
          response.data.data[0].pfbz2,
          response.data.data[0].pfbz3,
          response.data.data[0].pfbz4,
          response.data.data[0].pfbz5,
          // response.data.data[0].pfbzs,
        ].slice(0, this.pfbzs);
        this.standardScoring = [
          response.data.data[0].pfbzfz1,
          response.data.data[0].pfbzfz2,
          response.data.data[0].pfbzfz3,
          response.data.data[0].pfbzfz4,
          response.data.data[0].pfbzfz5,
        ].slice(0, this.pfbzs);

        // console.log(this.labels);
        // console.log(response.data.data[0].pfbzs+"666");
        // console.log(this.pfbzs);
        this.SavePfbzmsg(this.labels);
        this.setPfbz(this.standardScoring);
        // console.log(response.data.data[0].pfbzmsg+666);
        // console.log(this.standard);
        // console.log(this.$store.state.pfbz+"666");
      });
  },
  methods: {
    
    focusNextInput(index) {
    // 如果不是最后一个输入框
    const fields = this.$el.querySelectorAll('input');
    // console.log(fields);
    // console.log(index);
    // console.log(7777);
      // 转移到下一个输入框
      fields[index+2].focus();
  },
    ...mapMutations(['setdbrId']),
      SavedbrId(dbr){
        // console.log("666"+this.list[0].course_id);
        this.setdbrId(dbr);
      },
    outputAll() {
      this.$dialog.confirm({
  title: '导出答辩总成绩！',
  message: '是否导出答辩总成绩？',
})
  .then(() => {
    console.log("导出！");
    this.output();
  })
  .catch(() => {
    console.log("取消！");
  });
    },
    output() {
      axios.get("/scores/exportData?classId=" + this.$route.params.id, {
      responseType: 'blob',  // 设置响应类型为 blob
    }).then((response) => {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', this.$route.params.titlename + '总分数.xlsx');  // 设置文件名
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(url);  // 释放 URL 对象
      document.body.removeChild(link);
    });
    },
    outputdetail() {
      this.$dialog.confirm({
  title: '导出答辩详细成绩！',
  message: '是否导出答辩详细成绩？',
})
  .then(() => {
    console.log("导出！");
    this.outputdetailData();
  })
  .catch(() => {
    console.log("取消！");
  });
    },
    outputdetailData() {
      axios.get("/scores/exportDataDetails?classId=" + this.$route.params.id, {
      responseType: 'blob',  // 设置响应类型为 blob
    }).then((response) => {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', this.$route.params.titlename + '分数明细.xlsx');  // 设置文件名
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(url);  // 释放 URL 对象
      document.body.removeChild(link);
    });
    },
    warning(){
      this.$dialog.confirm({
  title: '随机抽取答辩学生',
  message: '随机抽取答辩学生会结束当前学生答辩，是否继续？',
})
  .then(() => {
    axios.post("/scores/Lottery?classId=" + this.$route.params.id).then((response) => {
      // if(response.data.code==-3){
      //   this.$error(response.data.message);
      //   alert(response.data.message);
      // }
      console.log(response);
      this.chname = response.data.data.chname;
      this.dbr = response.data.data.dbr;
    });
  })
  .catch(() => {
    console.log("取消！");
  });
    },
  endWarning(){
      this.$dialog.confirm({
  title: '结束当前学生答辩',
  message: '是否结束当前学生答辩？',
})
  .then(() => {
    axios.post("/scores/endTalkingStudent?classId=" + this.$route.params.id).then((response) => {
      console.log(response);
    });
    console.log("结束！");
    this.chname = "无人答辩！";
  })
  .catch(() => {
    console.log("取消！");
  });
    },

    over(){
      this.$dialog.confirm({
  title: '结束本次答辩！',
  message: '结束本次答辩后，所有人将无法再进行评分，是否继续？',
})
  .then(() => {
    axios.post("/scores/over?classId=" + this.$route.params.id).then((response) => {
      console.log(response);
    });
    console.log("结束！");
    this.chname = "无人答辩！";
  })
  .catch(() => {
    console.log("取消！");
  });
    },
    ...mapMutations(['setPfbz']),
      SavePfbz(pfbz){
        // console.log("666"+this.list[0].course_id);
        this.setPfbz(pfbz);
      },
    zfadd() {
      return (this.zf =
        parseInt(this.Scoring[0]) +
        parseInt(this.Scoring[1]) +
        parseInt(this.Scoring[2]) +
        parseInt(this.Scoring[3]) +
        parseInt(this.Scoring[4]));
    },
    ...mapMutations(["setPfbzmsg"]),
    SavePfbzmsg(pfbzmsg) {
      this.setPfbzmsg(pfbzmsg);
    },
    onSubmit(values) {
      this.$confirm("是否提交？")
       .then(() => {
          this.onSubmitData(values);
        })
       .catch(() => {
          this.$message.info("已取消");
        });
    },
    onSubmitData(values) {
      this.zfadd();
      axios
        .post(
          "/scores/updateGrade?dbr=" +
            this.dbr +
            "&pfr="+
            localStorage.getItem('userId')+
            "&classId=" +
            this.$route.params.id +
            "&pf1=" +
            this.Scoring[0] +
            "&pf2=" +
            this.Scoring[1] +
            "&pf3=" +
            this.Scoring[2] +
            "&pf4=" +
            this.Scoring[3] +
            "&pf5=" +
            this.Scoring[4] +
            "&zf=" +
            this.zf +
            "&memo=" +
            this.memo
        )
        .then((response) => {
          console.log(response);
          if(response.data.code==200){
            this.$message.success("提交成功！");
          }
          if(response.data.code==-2){
            this.$message.error("已提交，请勿重复提交");
          }
        }).catch((error) => {
          if (error.response.status==400) {
            this.$message.error("提交失败！请检查输入数据！或者查看当前是否有人答辩!");
          }
        })  
        ;
      // console.log("submit", values);
    },

  },
};
</script> 

<style scoped>
/* .fields {
  color: red;
} */
</style>

